<template>
    <el-container>
        <div class="c2">

                    <div class="c1">
                        <!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->

                        &#12288;&#12288; &#12288;&#12288;&#12288;&#12288;&#12288;
                        <el-form
                                :inline="true"
                                :model="searchData"
                                class="demo-form-inline s1"
                        >
                            <el-form-item>
                                <el-input
                                        class="search_inp"
                                        v-model="searchData.courseName"
                                        placeholder="输入'课程名'查询"
                                ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <!--<el-input-->
                                        <!--class="search_inp"-->
                                        <!--v-model="searchData.courseTime"-->
                                        <!--placeholder="输入'课程时间(**年)'查询"-->
                                <!--&gt;</el-input>-->
                                <!--<div class="block">-->
                                    <!--<el-date-picker-->
                                            <!--v-model="searchData.courseTime"-->
                                            <!--type="year"-->
                                            <!--placeholder="选择年进行查询"-->
                                            <!--value-format="yyyy"-->
                                    <!--&gt;-->
                                    <!--</el-date-picker>-->
                                    <!--<span class="demonstration">年</span>-->
                                <!--</div>-->
                                <div class="block">
                                    <span class="demonstration"></span>
                                    <el-date-picker
                                            v-model="searchData.courseTime"
                                            align="right"
                                            type="date"
                                            placeholder="选择日期"
                                            value-format="yyyy-MM-dd"
                                            :picker-options="pickerOptions">
                                    </el-date-picker>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                        size="mini"
                                        type="success"
                                        icon="el-icon-search"
                                        @click="searchBtn(searchData)"
                                >查询</el-button
                                >
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                        size="mini"
                                        type="warning"
                                        icon="el-icon-refresh-left"
                                        @click="searchrestBtn(searchData)"
                                >重置</el-button
                                >
                            </el-form-item>
                        </el-form>
                    </div>

                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            max-height="400"
                            align="center"
                            stripe
                            v-loading="loading"
                    >
                        <el-table-column type="index" width="50" label="序号">
                        </el-table-column>
                        <el-table-column prop="keyId" label="ID" width="50" align="center">
                        </el-table-column>
                        <el-table-column prop="courseName" label="课程名" align="center">
                        </el-table-column>

                        <el-table-column prop="teacherName" label="授课教员" align="center">
                        </el-table-column>
                        <el-table-column prop="courseTime" label="授课时间" align="center">
                        </el-table-column>
                        <el-table-column prop="trainForm" label="授课形式" align="center">
                        </el-table-column>
                        <el-table-column prop="courseGrade" label="课程分数" align="center">
                        </el-table-column>
                        <el-table-column prop="isQualified" label="是否合格" align="center">
                        </el-table-column>
                        <el-table-column prop="teacherComment" label="教员评价" align="center">

                        </el-table-column>

                        <el-table-column prop="studentFeedback" label="课程反馈" align="center">
                        </el-table-column>

                        <el-table-column width="120" label="修改提交反馈信息" align="center">
                            <template slot-scope="scope" >
                                <el-button
                                        size="mini"
                                        type="primary"
                                        @click="handleGradeFeedbackEdit(scope.row)"
                                >修改||提交</el-button>

                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pageCon">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="this.pageNum.currentPage"
                                :page-sizes="[2 , 4, 6, 8]"
                                :page-size="this.pageNum.perPage_size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="this.pageNum.total"
                        >
                        </el-pagination>
                    </div>


        </div>

        <!-- 新增菜单对话框 start -->

        <el-dialog
                title="新增用户"
                :visible.sync="adduserDialogVisible"
                width="50%"
                class="adddialog"
        >
            <el-form
                    class="editform"
                    ref="ruleForm"
                    :rules="rules"
                    label-position="left"
                    label-width="80px"
                    :model="addData"
            >
                <!-- <el-form-item label="菜单类型">
                  <template>
                    <el-radio v-model="addData.type" :label="1">目录</el-radio>
                    <el-radio v-model="addData.type" :label="2">菜单</el-radio>
                    <el-radio v-model="addData.type" :label="3">按钮</el-radio>
                  </template>
                </el-form-item> -->
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="addData.userName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="登录账号" prop="loginName">
                    <el-input v-model="addData.loginName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="password">
                    <el-input v-model="addData.password" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="addData.phone" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addData.email" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="部门" prop="deptList">
                    <!-- <Treeselect
                      v-model="deptList"
                      :options="depts"
                      style="width: 178px"
                      placeholder="选择部门"
                      @select="selectFun"
                    /> -->
                    <el-select v-model="addData.deptList" multiple placeholder="请选择">
                        <el-option
                                v-for="item in depts"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" prop="roleList">
                    <!-- <Treeselect
                      v-model="deptList"
                      :options="depts"
                      style="width: 178px"
                      placeholder="选择部门"
                      @select="selectFun"
                    /> -->
                    <el-select v-model="addData.roleList" multiple placeholder="请选择">
                        <el-option
                                v-for="item in roles"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch
                            v-model="addData.status"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                    >
                    </el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="warning" @click="addNo">取 消</el-button>
        <el-button size="mini" type="primary" @click="adduserDialog"
        >确 定</el-button
        >
      </span>
        </el-dialog>
        <!-- 新增菜单对话框 end -->

        <!-- 删除 -->
        <el-dialog title="提示" :visible.sync="deluserDialogVisible" width="30%">
            确认删除吗?
            <span slot="footer" class="dialog-footer">
        <el-button @click="deluserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deluserDialog">确 定</el-button>
      </span>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog
                title="用户修改"
                :visible.sync="edituserDialogVisible"
                width="50%"
        >
            <el-form
                    class="editform"
                    ref="ruleForm2"
                    :rules="rules"
                    label-position="left"
                    label-width="80px"
                    :model="usersForm"
            >
                <el-form-item label="用户名" prop="userName">
                    <el-input
                            v-model="usersForm.userName"
                            placeholder="请输入"
                    ></el-input>
                </el-form-item>
                <!-- <el-form-item label="登录账号" prop="loginName">
                  <el-input
                    v-model="usersForm.loginName"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="password">
                  <el-input
                    v-model="usersForm.password"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item> -->
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="usersForm.phone" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="usersForm.email" placeholder="请输入"></el-input>
                </el-form-item>

                <el-form-item label="角色" prop="roleIds">
                    <el-select multiple v-model="editDate1.roleIds" placeholder="请选择">
                        <el-option
                                v-for="item in tableData1"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门" prop="deptList">
                    <el-select v-model="editDate1.deptList" multiple placeholder="请选择">
                        <el-option
                                v-for="item in depts"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
        <el-button @click="edituserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edituserDialog">确 定</el-button>
      </span>
        </el-dialog>
        <!-- 修改回馈信息 -->
        <el-dialog
                title="修改回馈信息"
                :visible.sync="editGradeFeedbackDialogVisible"
                width="50%"
        >
            <el-form
                    class="editform"
                    ref="ruleForm2"
                    :rules="rules5"
                    label-position="left"
                    label-width="80px"
                    :model="feedbackForm"
            >
                <el-form-item label="" align="center" prop="studentFeedback">
                </el-form-item>
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="feedbackForm.studentFeedback">
                </el-input>
            </el-form>

            <span slot="footer" class="dialog-footer">
        <el-button @click="editGradeFeedbackDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editGradeFeedbackDialog">确 定</el-button>
      </span>
        </el-dialog>
    </el-container>
</template>

<script>
    import axios from "../../utils/axios";
    import md5 from "js-md5";
    import { getDepts, roleList,getDeptsList } from "../../utils/api";

    // import Treeselect from "@riophae/vue-treeselect";

    // import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        //  components: { Treeselect },
        methods: {
            //部门树
            deptsTree() {
                let parms ={}
                parms.deptName= this.deptName2;
                parms.isAll=true;
                getDepts(parms).then((res) => {
                    if (res.code == 200) {
                        this.depts = res.data;
                    }
                });
            },
            //部门查询
            deptsTree2() {
                let parms ={}
                parms.name= this.deptName2;
                parms.size=-1

                getDeptsList(parms).then((res) => {
                    if (res.code == 200) {
                        this.depts = res.data;
                    }
                });
            },
            //部门树点击
            handleNodeClick() {
                console.log(1);
            },
            //用户列表
            getUserList(con) {
                axios({
                    method: "GET",
                    url: "/sys/user",
                    params: con,
                }).then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data.records;
                        // this.parentList = res.data.filter((item) => item.pid == 0);
                        this.loading = false;
                        this.pageNum.current = res.data.current;
                        this.pageNum.size = res.data.size;
                        this.pageNum.total = res.data.total;
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },

            //查询分数回馈界面
            getgradeFeedbackList(con) {
                axios({
                    method: "GET",
                    url: "/feedback/queryGradeFeedback",
                    params: con,
                }).then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data.records;
                        // this.parentList = res.data.filter((item) => item.pid == 0);
                        this.loading = false;
                        this.pageNum.current = res.data.current;
                        this.pageNum.size = res.data.size;
                        this.pageNum.total = res.data.total;
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //用户状态
            changeSwitch(con1, con2) {
                let data = {};
                data.id = con2;
                data.status = con1;
                if (con1 == 1) {
                    let data = {};
                    data.id = con2;
                    data.status = con1;

                    this.$confirm("此操作将启用该角色", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            axios({
                                method: "PUT",
                                url: "/sys/user",
                                data: data,
                            }).then((res) => {
                                if (res.code == 200) {
                                    this.$message.success("启用成功");
                                    this.edituserDialogVisible = false;
                                    this.getUserList(this.pageNum);
                                } else {
                                    this.getUserList(this.pageNum);
                                    this.$message.error(res.message);
                                }
                            });
                        })
                        .catch(() => {
                            this.getUserList(this.pageNum);
                        });
                }
                if (con1 == 0) {
                    let data = {};
                    data.id = con2;
                    data.status = con1;

                    this.$confirm("此操作将禁用该角色", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            axios({
                                method: "PUT",
                                url: "/sys/user",
                                data: data,
                            }).then((res) => {
                                if (res.code == 200) {
                                    this.$message.success("禁用成功");
                                    this.edituserDialogVisible = false;
                                    this.getUserList(this.pageNum);
                                } else {
                                    this.getUserList(this.pageNum);
                                    this.$message.error(res.message);
                                }
                            });
                        })
                        .catch(() => {
                            this.getUserList(this.pageNum);
                        });
                }
            },
            //页码
            handleSizeChange(val) {
                this.pageNum.size = val;
                if (this.searchToggle) {
                    this.searchData.current = this.pageNum.current;
                    this.searchData.size = this.pageNum.size;
                    this.getgradeFeedbackList(this.searchData);
                } else {
                    this.getgradeFeedbackList();
                }
            },
            handleCurrentChange(val) {
                this.pageNum.current = val;
                if (this.searchToggle) {
                    this.searchData.current = this.pageNum.current;
                    this.searchData.size = this.pageNum.size;
                    this.getgradeFeedbackList(this.searchData);
                } else {
                    this.getgradeFeedbackList();
                }
            },
            //添加
            adduser() {
                this.adduserDialogVisible = true;
                roleList({ size: -1 }).then((res) => {
                    console.log(res);
                    this.roles = res.data.records;
                });
                this.searchrestBtn();
            },

            addNo() {
                this.adduserDialogVisible = false;
                this.$refs.ruleForm.resetFields();
            },
            adduserDialog() {
                let obj = Object.assign({}, this.addData)
                obj.password = md5(obj.password);
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        axios({
                            method: "POST",
                            url: "/sys/user",
                            data: obj,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("添加成功");
                                this.adduserDialogVisible = false;
                                this.getUserList(this.pageNum);
                                this.$refs.ruleForm.resetFields();
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        this.$message.error("内容不完整");
                    }
                });
            },

            //查询
            searchBtn(con) {
                this.getgradeFeedbackList(con);
                this.searchToggle = true;
            },
            //导出
            download() {
                this.downloadLoading = true;
            },
            //重置
            searchrestBtn() {
                this.searchData.courseName = "";
                this.searchData.courseTime="";
                this.getgradeFeedbackList();
                this.searchToggle = false;
            },
            //删除
            handleDelete(con) {
                this.deluserDialogVisible = true;

                this.delDate = [];
                this.delDate.push(con);
            },
            deluserDialog() {
                axios({
                    method: "delete",
                    url: "/sys/user",

                    data: JSON.stringify(this.delDate),
                    headers: {
                        "Content-Type": "application/json;charset=UTF-8",
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("删除成功");
                        this.deluserDialogVisible = false;
                        this.getUserList(this.pageNum);
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            deluserhandleClose(done) {
                this.$confirm("确认关闭？")
                    .then(() => {
                        done();
                    })
                    .catch(() => {});
            },
            //角色查询
            getRoleList() {
                axios({
                    method: "GET",
                    url: "/sys/role",
                    params: { size: -1 },
                }).then((res) => {
                    if (res.code == 200) {
                        this.tableData1 = res.data.records;
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //修改
            handleEdit(con) {
                this.edituserDialogVisible = true;
                this.usersForm.userName = con.userName;
                this.usersForm.loginName = con.loginName;
                this.usersForm.password = con.password;
                this.usersForm.phone = con.phone;
                this.usersForm.email = con.email;
                this.usersForm.id = con.id;
                this.editDate1.userId = con.id;
            },
            //修改分数回馈
            handleGradeFeedbackEdit(con) {
                this.editGradeFeedbackDialogVisible = true;
                this.feedbackForm.id = con.keyId;
                 this.feedbackForm.studentFeedback=con.studentFeedback;
            },
            edituserDialog() {
                this.$refs.ruleForm2.validate((valid) => {
                    if (valid) {
                        axios({
                            method: "PUT",
                            url: "/sys/user",
                            data: this.usersForm,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("修改成功");
                                this.edituserDialogVisible = false;
                                this.getUserList(this.pageNum);
                            } else {
                                console.log(res);
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        this.$message.error("内容不完整");
                    }
                });
            },
            editGradeFeedbackDialog() {
                this.$refs.ruleForm2.validate((valid) => {
                    if (valid) {
                        axios({
                            method: "PUT",
                            url: "/feedback/updateGradeFeedback",
                            data: this.feedbackForm,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("修改成功");
                                this.editGradeFeedbackDialogVisible = false;
                                this.getgradeFeedbackList(this.pageNum);
                            } else {
                                console.log(res);
                                this.$message.error(res.message);
                            }
                        });
                    } else {
                        this.$message.error("内容不完整");
                    }
                });
            },
            //重置用户角色关联
            restUserRoles() {
                let data = {}
                data.roleIds=this.editDate1.roleIds
                data.userId=this.editDate1.userId
                axios({
                    method: "POST",
                    url: "/sys/role/reset",
                    data: data,
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("角色重置成功");

                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            edituserhandleClose(done) {
                this.$confirm("确认关闭？")
                    .then(() => {
                        done();
                    })
                    .catch(() => {});
            },
            //重置密码
            restPassword(con) {
                this.$confirm("此操作将重置密码, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        let obj = {};
                        obj.id = con;
                        axios({
                            method: "GET",
                            url: "/sys/user/restPassword",
                            params: obj,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("重置成功");
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            },
        },
        data() {
            return {
                pageNum: {
                    current: 1,
                    size: 10,
                    total: 0,
                },
                icons: "",
                adduserDialogVisible: false,
                deluserDialogVisible: false,
                edituserDialogVisible: false,
                editGradeFeedbackDialogVisible: false,
                innerVisible: false,
                searchToggle: true,
                loading: true,
                downloadLoading: false,
                delDate: [],

                searchData: {
                    courseName: "",
                    courseTime: "",
                },
                usersForm: {
                    email: "",
                    loginName: "",
                    password: "",
                    phone: "",
                    photo: "",
                    status: 0,
                    userName: "",
                },
                feedbackForm: {
                   id: "",
                   studentFeedback:"",
                },
                tableData: [],
                tableData1: [],
                depts: [],


                roles: [],

                deptName: {},
                deptName2: '',

                defaultProps: {
                    children: "children",
                    label: "name",
                },

                editDate1: {
                    roleIds: [],
                    userId: "",
                },
                // parentList: [],
                addData: {
                    deptList: [],
                    email: "",
                    loginName: "",
                    password: "",
                    phone: "",
                    photo: "",
                    roleList: [],
                    status: 1,
                    userName: "",
                },
                rules: {
                    loginName: [{ required: true, message: "必填", trigger: "blur" }],
                    password: [{ required: true, message: "必填", trigger: "blur" }],
                    userName: [{ required: true, message: "必填", trigger: "blur" }],
                    email: [{ message: "邮箱格式错误", trigger: ["blur", "change"], pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/ }],
                    phone: [
                        {
                            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
                            message: "手机号格式错误",
                            trigger: ["blur", "change"],
                        },
                    ],
                    // authStr: [{ required: true, message: "必填", trigger: "blur" }],
                },
                rules5:{
                    studentFeedback:  [{ required: true, message: "必填", trigger: "blur" }],
                },
                rules3: {
                    roleIds: [{ required: true, message: "必填", trigger: "blur" }],

                    // authStr: [{ required: true, message: "必填", trigger: "blur" }],
                },
            };
        },
        filters: {
            ellipsis(value, len) {
                if (!value) return
                if (value.length > len) {
                    return value.slice(0, len) + '...'
                }
                return value
            }
        },
        created() {
            this.getgradeFeedbackList();
            // this.getUserList();
            // this.getRoleList();
            // this.deptsTree();

        },
    };
</script>

<style lang="less" scoped>
    .el-container {
        display: flex;
        justify-content: start;
        flex-direction: column;
        align-items: center;
    }
    .el-card {
        width: 100%;
    }
    .el-footer {
        align-self: start;
        margin-top: 1.5rem;
    }
    .c1 {
        display: flex;
        justify-content: start;
        margin-bottom: 1.5rem;
        width: 100%;
        .dBtn {
            margin-right: 1rem;
        }
    }
    .el-dialog {
        display: flex;
        justify-content: flex-start;
    }
    .btns {
        display: flex;
        justify-content: space-between;
    }
    .s1 {
        height: 0;
        margin-top: 2.5rem;
        display: flex;
        align-items: center;
    }

    .editform {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        text-align: left;
        .el-input /deep/.el-input__inner {
            height: 3.05rem;
            font-size: 12px !important;
        }
    }
    .el-input /deep/.el-input__inner {
        height: 3.05rem;
        font-size: 12px !important;
    }
    .editform /deep/ .el-form-item {
        display: inline-block;
        margin-left: 1rem;

        width: 48%;
    }
    .el-input /deep/ .el-input__icon {
        height: 100%;
        width: 25px;
        text-align: center;
        transition: all 0.3s;
        line-height: 3.05rem;
    }
    .pageCon {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-top: 1.3rem;
    }
    .el-table /deep/ {
        font-size: 12px;
    }
    .el-switch /deep/ .el-switch__label * {
        font-size: 12px;
    }
    .el-table /deep/ thead {
        font-size: 12.5px;
        color: #909399;
        font-weight: 700;
    }
    .depttree {
        margin-top: 20px;
        font-size: 14px;
    }
    .el-dialog /deep/ .el-dialog__header {
        padding: 20px 20px 10px;
        text-align: left !important;
    }
</style>